revision:
There are dozens of image formats to choose from. But when it comes to the web, a handful of them are preferred: JPEG, PNG, GIF, and increasingly WebP and AVIF.
The types of images used on a webpage affect the site's:
- performance : some image formats take up more space than others, which can affect site’s loading times.
- appearance : some image formats include greater detail for a higher-quality visual experience.
- scalability : stretching or shrinking an image too much impacts the quality. How much leeway there is depends on the image format.
- compatibility : sometimes a certain image format must be based on the platform, app, or software used. Furthermore, some devices and browsers prefer certain image formats, or even have their own proprietary formats, like HEIC on Apple devices.
In most cases, using one or two image formats throughout a website helps maintain a consistent standard and should provide a nice balance between quality and performance.
The group was formed in 1986, and the first JPEG standard was published in 1992. JPEG is a lossy image format made for photos.
Main benefits of JPEGs:
- supports millions of colors (24-bit color), compresses natural photos well, usually smaller than PNGs, which helps pages load faster (but modern formats like WebP/AVIF are usually smaller than JPEG at similar quality).
- works everywhere : browsers, apps, and devices,
- easy to convert to other formats like PNG, WebP, or AVIF (though lost detail can’t be recovered).
In general, JPEG is an excellent option for displaying complex photographs that include a lot of color and texture.
Limitations (what JPEG isn’t great at):
- no transparency (only a hard background workaround);
- no animation;
- artifacts on sharp edges, icons, or text;
- usually larger than WebP or AVIF at the same quality;
- limited to 8-bit color;
- no HDR or wide-gamut support;
- loses more quality each time it’s re-saved.
Best used for:
- photos and hero images needing wide support;
- fallbacks when modern formats aren’t supported.
Avoid for:
- logos, UI, diagrams, text, screenshots → use PNG, SVG, or WebP lossless;
- transparency → use PNG, WebP, or AVIF;
- animations → use MP4, WebM, or animated WebP/AVIF.
What’s also a good practice is to remove extra EXIF or metadata unless needed (like orientation or copyright). This will make the image smaller in disk space.
Further, when using JPGs on a website, remember to set width and height, and use lazy loading when you can.
PNG iss widely used on websites and supports millions of colors. However, it works best for images with flat colors and sharp edges, such as UI elements, logos, diagrams, and screenshots. For photos, PNG files are usually much larger than JPEG, WebP, or AVIF.
Main benefits of PNGs:
- great for flat or low-color images (UI, diagrams, screenshots); often smaller than JPEG for these cases;
- works everywhere – browsers, tools, and devices;
- uses lossless compression, so pixels stay exact even after re-saving;
- supports true alpha transparency for clean overlays and logos;
- handles both indexed (palette) and truecolor (24-bit+) modes with no quality loss;
- supports animation through APNG, useful for short UI loops that need transparency.
Modern context and caveats:
- PNG files are often 2–10× larger than JPEG, WebP, or AVIF. Use only when lossless quality is required.
- lossless WebP or AVIF can be smaller than PNG for some UI assets. Serve them with PNG as a fallback.
- use SVG for vector logos and icons – it’s smaller and scales cleanly.
- “PNG-8” can be much smaller than truecolor PNG for flat-color designs.
- optimize PNGs with tools like Optimole or Imagify to reduce size without changing quality.
- use PNG for pixel art or 1-pixel-line graphics that must stay sharp; avoid lossy formats like JPEG or WebP.
PNG is the top choice for sharp graphics, transparency, and pixel-perfect detail. For photos or smaller files, test lossless WebP or AVIF and keep PNG as a reliable fallback.
WebP is a newer image format that has become popular as browsers added full support and Google started recommending it.
Introduced in 2010, WebP supports both lossy and lossless compression, along with alpha transparency and animation, all in one format. It can produce >smaller files than JPEG or PNG at similar visual quality.
It combines features from several formats: motion like GIF, transparency like PNG, and compression like JPEG. That makes it a flexible choice for the web and a solid option for anyone who wants smaller, high-quality images without switching between multiple formats.
Main benefits of WebP:
- smaller files than JPEG/PNG at similar quality; supports both lossy and lossless modes;
- animation support, typically much more efficient than GIF and often smaller than APNG;
- alpha transparency like PNG;
- near-universal browser support today (≈ 95%+ global usage share; but keep JPEG/PNG fallbacks for the long tail/legacy tools).
The WebP file format holds promise for adding images to websites. It provides the transparency potential of PNGs, motion possibilities of GIFs, and improved compression results when compared to older image file types like JPEGs and PNGs.
However, some solutions still prefer to store assets in PNG/JPEG, and then transcode to WebP at build/CDN time.
WebPs are used for:
- any graphic you want to display on the web;
- boosting performance/SEO by adopting modern image formats (use WebP/AVIF with JPEG/PNG fallbacks);
- creating logos or transparent UI assets with stronger compression potential than PNG (test lossless WebP vs PNG);
- making animated images without the bulk of GIF;
- maintaining high visual quality at lower byte sizes than JPEG/PNG.
The WebP file format functions well for interface screenshots (lossless), most photographic images (lossy), and lightweight animations. In many cases there are substantial byte savings versus JPEG (and dramatic vs GIF/PNG), with comparable perceived quality.
AVIF (AV1 Image File Format) is built on the AV1 video codec and pushes image compression forward. It delivers great visual quality at a fraction of the size of older formats like JPEG and PNG.
There are both lossy and lossless options, full alpha transparency, and even animation in one format. That means crisp photos, smooth gradients, and clean overlays.
AVIF shines with detailed photos and images rich in color. It also supports HDR and wide-gamut color, giving more depth and realism. Still, not every browser or device renders it perfectly yet, so keeping an SDR fallback is a smart move.
Main benefits of AVIF:
- much smaller files than JPEG/PNG (and typically smaller than WebP) at comparable quality;
- broad browser support today (Chrome, Edge, Firefox, Safari); keep a JPEG/PNG fallback for the long tail and older tooling;
- lossy + lossless, alpha transparency, and (emerging) animation in one format;
- animated support exists but is less universally implemented than static AVIF; br - HDR/Wide Color Gamut capabilities for richer color where supported; expect some cross-browser differences in tone mapping;
- future-proofed with AV1 coding, which is being adopted for video formats and is likely to become more prevalent.
A few trade-offs to know:
- encoding/decoding can be heavier than WebP/JPEG; WebP often decodes faster on low-end devices even if AVIF is smaller. Balance bytes vs CPU;
- animation support and HDR behavior aren’t uniform across all browsers yet; test and provide safe fallbacks;
- some CMS/plugins and editors only recently added AVIF; most modern stacks handle it or can transcode at build/CDN time. WordPress 6.5 added AVIF support.
As more platforms embrace AVIF, adoption will continue to rise. Google also indexes AVIF images in Search, removing a past hesitation for SEO-conscious sites.
Default for most images (photos and many graphics):
- use modern formats with fallbacks.
- AVIF (smallest files, supports transparency/animation, HDR-capable) or WebP (great size/speed balance, transparency/animation).
- serve them with a JPEG/PNG fallback for older tools.
- if your CMS can transcode, keep originals (PNG/JPEG/SVG) and let the platform output AVIF/WebP automatically.
JPEG : is best when you need broadest compatibility and fast decode for photographs. Great for galleries and hero photos where lossy compression is acceptable. Avoid for UI/screenshot/text (blurry edges) and for anything needing transparency or animation. Keep quality reasonable and consider progressive JPEG.
PNG : is best for pixel-perfect UI, logos, icons, diagrams, screenshots, and true alpha transparency. Prefer for sharp edges and text; consider PNG-8 (palette) for flat art. For photos, PNG is usually much heavier than AVIF/WebP/JPEG, so avoid it unless you truly need lossless. If the asset is vector, SVG is even better.
Important Notes :
Quality matters : at very low quality (<:70), JPEG may degrade more harshly than WebP, making WebP look better even at smaller sizes.
Browser support : WebP is supported in all modern browsers (Chrome, Firefox, Edge, Safari ≥14). For older browsers (e.g., IE), you’ll need a fallback (use <:picture>).
Not all images compress equally : photos with gradients or complex textures benefit most; simple graphics may see less gain.
On average, WebP images are 25% to 35% smaller in file size than JPEG images at similar visual quality, which directly translates to faster download speeds.
Since download time ≈ file size ÷ bandwidth, a 30% smaller file = ~30% faster download (assuming same network conditions).
Recommendation : use WebP for all photographic images. Provide JPEG fallback for compatibility.
Example
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="...">
</picture>
This gives you faster loads for 95%+ of users while maintaining backward compatibility.
Setting up a WebP fallback ensures that browsers that don’t support the WebP image format still display an alternative image (typically in JPEG or PNG).
Using <picture> element (recommended)
This is the most robust and semantic way to provide a WebP fallback.
Example:
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="...">
</picture>
Browsers that support WebP will load "image.webp"; others will fall back to "image.jpg" (or .png).
Using CSS with feature detection (e.g., Modernizr or @supports)
Use CSS to serve WebP if supported, but this is less common for content images (better for backgrounds).
Example with @supports (limited browser support for image formats in CSS):
<style>
/* Fallback */
.hero {
background-image: url('image.jpg');
}
/* WebP support (not reliably detectable via @supports) */
/* Instead, use JavaScript or server-side detection */
</style>
CSS alone cannot reliably detect WebP support. Better to use <picture> or JavaScript.
JavaScript-based fallback
Detect WebP support and swap image sources dynamically.
<div>
<img src="image.jpg" data-webp="image.webp" alt="...">
</div>
<script>
function supportsWebP() {
return new Promise(resolve => {
const webP = new Image();
webP.onload = webP.onerror = () => resolve(webP.height === 2);
webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
});
}
supportsWebP().then(supported => {
if (supported) {
document.querySelectorAll('img[data-webp]').forEach(img => {
img.src = img.getAttribute('data-webp');
});
}
});
</script>
Useful for dynamic content or when you can't modify HTML structure. But, adds complexity and requires JS.
Recommendation /
For most use cases, use the <picture> element — it’s simple, widely supported, and doesn’t rely on JavaScript